<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贵州四季康养文旅小程序原型</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f5f5f5;
        }
        .device-frame {
            width: 390px;
            height: 844px;
            border-radius: 40px;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            background: white;
            position: relative;
            margin: 20px;
        }
        .device-frame iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        .device-title {
            text-align: center;
            font-weight: bold;
            margin-bottom: 10px;
            color: #0052d9;
        }
        .section-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #0052d9;
            margin: 2rem 0 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #e0e7ff;
            width: 100%;
            text-align: center;
        }
        .section-description {
            color: #6b7280;
            text-align: center;
            margin-bottom: 1.5rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="container mx-auto py-8">
        <h1 class="text-3xl font-bold text-center mb-4 text-blue-600">贵州四季康养文旅小程序原型</h1>
        <p class="text-center mb-8 text-gray-600">基于TDesign风格，按照功能重要性和用户流程进行分类展示</p>
        
        <!-- 核心页面（一级页面） -->
        <h2 class="section-title">核心页面（一级页面）</h2>
        <p class="section-description">用户最常访问的主要入口页面，包括启动页、引导页、首页、发现、消息、登录页和个人中心</p>
        <div class="flex flex-wrap justify-center">
            <!-- 启动页 -->
            <div class="flex flex-col items-center">
                <p class="device-title">启动页 (welcome)</p>
                <div class="device-frame">
                    <iframe src="core/welcome.html"></iframe>
                </div>
            </div>
            
            <!-- 引导页 -->
            <div class="flex flex-col items-center">
                <p class="device-title">引导页 (guide)</p>
                <div class="device-frame">
                    <iframe src="core/guide.html"></iframe>
                </div>
            </div>
            
            <!-- 登录页面 -->
            <div class="flex flex-col items-center">
                <p class="device-title">登录 (login)</p>
                <div class="device-frame">
                    <iframe src="core/login.html"></iframe>
                </div>
            </div>

            <!-- 首页 -->
            <div class="flex flex-col items-center">
                <p class="device-title">首页 (home)</p>
                <div class="device-frame">
                    <iframe src="core/home.html"></iframe>
                </div>
            </div>
            
            <!-- 发现页 -->
            <div class="flex flex-col items-center">
                <p class="device-title">发现 (discover)</p>
                <div class="device-frame">
                    <iframe src="core/discover.html"></iframe>
                </div>
            </div>
            
            <!-- 消息页 -->
            <div class="flex flex-col items-center">
                <p class="device-title">消息 (messages)</p>
                <div class="device-frame">
                    <iframe src="core/messages.html"></iframe>
                </div>
            </div>
            
            <!-- 个人中心 -->
            <div class="flex flex-col items-center">
                <p class="device-title">个人中心 (profile)</p>
                <div class="device-frame">
                    <iframe src="core/profile.html"></iframe>
                </div>
            </div>
        </div>
        
        <!-- 内容详情页（二级页面） -->
        <h2 class="section-title">内容详情页（二级页面）</h2>
        <p class="section-description">展示具体内容的详细信息，包括景点、产品、酒店和订单详情</p>
        <div class="flex flex-wrap justify-center">
            <!-- 景点详情页 -->
            <div class="flex flex-col items-center">
                <p class="device-title">景点详情 (scenic_detail)</p>
                <div class="device-frame">
                    <iframe src="detail/scenic_detail.html"></iframe>
                </div>
            </div>
            
            <!-- 商品详情页 -->
            <div class="flex flex-col items-center">
                <p class="device-title">商品详情 (product_detail)</p>
                <div class="device-frame">
                    <iframe src="detail/product_detail.html"></iframe>
                </div>
            </div>
            
            <!-- 酒店详情页 -->
            <div class="flex flex-col items-center">
                <p class="device-title">酒店详情 (hotel_detail)</p>
                <div class="device-frame">
                    <iframe src="detail/hotel_detail.html"></iframe>
                </div>
            </div>
            
            <!-- 订单详情页 -->
            <div class="flex flex-col items-center">
                <p class="device-title">订单详情 (order_detail)</p>
                <div class="device-frame">
                    <iframe src="detail/order_detail.html"></iframe>
                </div>
            </div>
            
            <!-- 康养服务详情页 -->
            <div class="flex flex-col items-center">
                <p class="device-title">康养服务详情 (wellness_service_detail)</p>
                <div class="device-frame">
                    <iframe src="detail/wellness_service_detail.html"></iframe>
                </div>
            </div>
        </div>
        
        <!-- 交易相关页面（二级页面） -->
        <h2 class="section-title">交易相关页面（二级页面）</h2>
        <p class="section-description">支持电商和交易功能，提供购物和支付流程的关键环节</p>
        <div class="flex flex-wrap justify-center">
            <!-- 购物车页面 -->
            <div class="flex flex-col items-center">
                <p class="device-title">购物车 (cart)</p>
                <div class="device-frame">
                    <iframe src="transaction/cart.html"></iframe>
                </div>
            </div>
            
            <!-- 订单确认页面 -->
            <div class="flex flex-col items-center">
                <p class="device-title">订单确认 (order_confirm)</p>
                <div class="device-frame">
                    <iframe src="transaction/order_confirm.html"></iframe>
                </div>
            </div>
            
            <!-- 支付结果页面 -->
            <div class="flex flex-col items-center">
                <p class="device-title">支付结果 (payment_result)</p>
                <div class="device-frame">
                    <iframe src="transaction/payment_result.html"></iframe>
                </div>
            </div>
            
            <!-- 优惠券页面 -->
            <div class="flex flex-col items-center">
                <p class="device-title">优惠券 (coupons)</p>
                <div class="device-frame">
                    <iframe src="transaction/coupons.html"></iframe>
                </div>
            </div>
        </div>
        
        <!-- 社交互动页面（二级页面） -->
        <h2 class="section-title">社交互动页面（二级页面）</h2>
        <p class="section-description">支持用户之间的互动和内容分享，提供即时通讯和消息管理功能</p>
        <div class="flex flex-wrap justify-center">
            <!-- 社区页面 -->
            <div class="flex flex-col items-center">
                <p class="device-title">社区 (community)</p>
                <div class="device-frame">
                    <iframe src="social/community.html"></iframe>
                </div>
            </div>
            
            <!-- 商家聊天页面 -->
            <div class="flex flex-col items-center">
                <p class="device-title">商家聊天 (merchant_chat)</p>
                <div class="device-frame">
                    <iframe src="social/merchant_chat.html"></iframe>
                </div>
            </div>
            
            <!-- 消息分类页面 -->
            <div class="flex flex-col items-center">
                <p class="device-title">消息分类 (message_categories)</p>
                <div class="device-frame">
                    <iframe src="social/message_categories.html"></iframe>
                </div>
            </div>
        </div>
        
        <!-- 功能服务页（三级页面） -->
        <h2 class="section-title">功能服务页（三级页面）</h2>
        <p class="section-description">提供特定功能或服务，包括生活服务、季节性活动和志愿者服务</p>
        <div class="flex flex-wrap justify-center">

            <!-- 商城服务 -->
            <div class="flex flex-col items-center">
                <p class="device-title">商城服务 (mall)</p>
                <div class="device-frame">
                    <iframe src="service/mall.html"></iframe>
                </div>
            </div>

            <!-- 生活服务 -->
            <div class="flex flex-col items-center">
                <p class="device-title">生活服务 (services)</p>
                <div class="device-frame">
                    <iframe src="service/services.html"></iframe>
                </div>
            </div>
            
            <!-- 四季导航页 -->
            <div class="flex flex-col items-center">
                <p class="device-title">四季导航 (seasons)</p>
                <div class="device-frame">
                    <iframe src="service/seasons.html"></iframe>
                </div>
            </div>
            
            <!-- 志愿服务 -->
            <div class="flex flex-col items-center">
                <p class="device-title">志愿服务 (volunteer)</p>
                <div class="device-frame">
                    <iframe src="features/volunteer.html"></iframe>
                </div>
            </div>
            
            <!-- 收藏夹 -->
            <div class="flex flex-col items-center">
                <p class="device-title">收藏夹 (favorites)</p>
                <div class="device-frame">
                    <iframe src="features/favorites.html"></iframe>
                </div>
            </div>
            
            <!-- 健康监测 -->
            <div class="flex flex-col items-center">
                <p class="device-title">健康监测 (health_monitor)</p>
                <div class="device-frame">
                    <iframe src="features/health_monitor.html"></iframe>
                </div>
            </div>
            
            <!-- AR导览 -->
            <div class="flex flex-col items-center">
                <p class="device-title">AR导览 (ar_guide)</p>
                <div class="device-frame">
                    <iframe src="features/ar_guide.html"></iframe>
                </div>
            </div>
        </div>
        
        <!-- 用户设置页 -->
        <h2 class="section-title">用户设置页</h2>
        <p class="section-description">用于用户账户和设置管理，包括设置页面和账户安全页面</p>
        <div class="flex flex-wrap justify-center">
            <!-- 设置页面 -->
            <div class="flex flex-col items-center">
                <p class="device-title">设置 (settings)</p>
                <div class="device-frame">
                    <iframe src="settings/settings.html"></iframe>
                </div>
            </div>
            
            <!-- 账户安全 -->
            <div class="flex flex-col items-center">
                <p class="device-title">账户安全 (account_security)</p>
                <div class="device-frame">
                    <iframe src="settings/account_security.html"></iframe>
                </div>
            </div>
            
            <!-- 个人资料 -->
            <div class="flex flex-col items-center">
                <p class="device-title">个人资料 (personal_info)</p>
                <div class="device-frame">
                    <iframe src="settings/personal_info.html"></iframe>
                </div>
            </div>
            
            <!-- 隐私设置 -->
            <div class="flex flex-col items-center">
                <p class="device-title">隐私设置 (privacy)</p>
                <div class="device-frame">
                    <iframe src="settings/privacy.html"></iframe>
                </div>
            </div>
            
            <!-- 通知设置 -->
            <div class="flex flex-col items-center">
                <p class="device-title">通知设置 (notification)</p>
                <div class="device-frame">
                    <iframe src="settings/notification.html"></iframe>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 商户相关页面 -->
    <h2 class="section-title">商户相关页面</h2>
    <p class="section-description">提供商户入驻和管理功能，帮助本地商家在平台上开展业务</p>
    <div class="flex flex-wrap justify-center">
        <!-- 商户入驻 -->
        <div class="flex flex-col items-center">
            <p class="device-title">商户入驻 (merchant_register)</p>
            <div class="device-frame">
                <iframe src="merchant/merchant_register.html"></iframe>
            </div>
        </div>
        
        <!-- 商户管理后台 -->
        <div class="flex flex-col items-center">
            <p class="device-title">商户管理后台 (merchant_dashboard)</p>
            <div class="device-frame">
                <iframe src="merchant/merchant_dashboard.html"></iframe>
            </div>
        </div>
    </div>
</body>
</html>
